<!DOCTYPE html>
<html>
<head>
<title>D3 Hero Panel</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<!-- css -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery/jquery.mobile-1.1.1.min.css" />
<link rel="stylesheet" href="css/d3.css" />
<!-- javascript -->
<script src="jquery/jquery-1.7.1.min.js"></script>
<script src="jquery/jquery.mobile-1.1.1.min.js"></script>
<script src="js/d3_cn_att.js"></script>
<script src="js/d3_main.js"></script>
</head>
<body>
<!-- Page : seelct class -->
<div id="pgCls" data-role="page">
    <div data-role="header">
        <h1>D3 Hero Panel</h1>
    </div>
    <div data-role="content">
       <div id="pnCls">
            <ul data-role="listview">
                <li data-role="list-divider"><h2>请选择职业</h2></li>
                <li><a href="#pgMain" cls="bb">野蛮人</a></li>
                <li><a href="#pgMain" cls="mo">武僧</a></li>
                <li><a href="#pgMain" cls="wd">巫医</a></li>
                <li><a href="#pgMain" cls="wi">秘法师</a></li>
                <li><a href="#pgMain" cls="dh">魔猎人</a></li>
            </ul>
        </div>
    </div>
</div>
<!-- Page : main -->
<div id="pgMain" data-role="page">
    <!-- header -->
    <div data-role="header">
        <h1>D3 Hero Panel</h1>
        <a href="#pgCls" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
        <!-- bar -->
        <div data-role="navbar">
            <ul>
                <li><a href="#pgAtrr" class="ui-btn-active ui-state-persist">属性</a></li>
                <li><a href="#pgEqu">装备</a></li>
                <li><a href="#pgSkill">技能</a></li>
            </ul>
        </div>
    </div>
    <div data-role="content">
        <!-- Panel : Attribute -->
        <div id="pnAtrr">
            <ul id="lstAtrr" data-role="listview" data-theme="c"></ul>
        </div>
    </div>
</div>
</body>
</html>